今天筆記的是 Service Worker 的觀念，較深入的部份將會在之後的文章，透過實作再來做細部說明。
Service Worker 是非常強大的 offline caching，讓使用者可以重複使用 cache，即時顯示畫面在網站或應用程式裡，提供優異的效能。
Service Worker 解決了 WEB 用戶無法離線瀏覽的問題，當網站處於離線狀態，沒有辦法利用網路得到更多資料之前，仍然可以提供基本體驗，讓網站更像 Native App、可以提供像是定期更新、推播通知等功能。
Service Workers 不能直接操作 DOM，但是可以通過 postMessage，把消息傳送給頁面，讓頁面去操作 DOM。
Service Worker，在瀏覽器的背景默默地執行，不需要透過網頁的操作觸發，Service Worker 有著自己的生命週期，為了使用 Service Worker，你的網站必須使用 Javascript 進行註冊，並且必須在 localhost 或 HTTPS 的環境底下，才能運行。
Service Worker 擁有一個完全獨立於 WEB 的生命週期，我們來了解 Service Worker 究竟是如何運作的？
使用 Service Worker：
註冊 Service Worker 之後，瀏覽器會在背景啟動一個 Service Worker 的安裝。
Service Worker 進行接管頁面。
接管頁面之後做處理：
跟著官方教程來講解一個簡單的 Service Worker 是如何運作？
首先我們觀察以下 HTML 的內容，透過 Javascript 註冊 Service Worker，並設定 3 秒後，要顯示一張『狗狗』的圖片。
<!DOCTYPE html>
An image will appear here in 3 seconds:
<script>
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered!', reg))
.catch(err => console.log('Boo!', err));
setTimeout(() => {
const img = new Image();
img.src = '/dog.svg';
document.body.appendChild(img);
}, 3000);
</script>
接著來看 Service Worker 的檔案（sw.js）：
self.addEventListener('install', event => {
console.log('V1 installing…');
// cache a cat SVG
event.waitUntil(
caches.open('static-v1').then(cache => cache.add('/cat.svg'))
);
});
self.addEventListener('activate', event => {
console.log('V1 now ready to handle fetches!');
});
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
// serve the horse SVG from the cache if the request is
// same-origin and the path is '/dog.svg'
if (url.origin == location.origin && url.pathname == '/dog.svg') {
event.respondWith(caches.match('/cat.svg'));
}
});
可以參考這個 DEMO 並開啟 console 觀察，發現第一次載入時，會運行：
<script>
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered!', reg))
.catch(err => console.log('Boo!', err));
setTimeout(() => {
const img = new Image();
img.src = '/dog.svg';
document.body.appendChild(img);
}, 3000);
</script>
網頁上等待三秒後，出現一張『狗狗』的圖片。
console 內會顯示 V1 installing… 、 SW registered! 最後出現 V1 now ready to handle fetches! 資訊，執行 install（cache a cat SVG）和 activate 階段。
再次透過 console 觀察，重新整理後，Service Worker 就會攔截到圖片的 request，並置換成 『貓咪』的圖片。
今天筆記了 Service Worker 的用途以及生命週期，透過簡單的範例去了解基本的運作原理。
Service Worker 會影響網頁的行為，之後會再接下來的文章中，講解如何實作 Service Worker，而下一篇要分享如何使用 Chrome devTools 檢視 Service Worker 等狀態。
本人小小筆記，如有錯誤或需要改進的部分，歡迎給予回饋。
我將會用最快的速度修正，m(_ _)m。謝謝
iThome鐵人賽
看影片追技術